<template>
  <div class="login_whole">
    <div class="register-box">
      <h2>注册</h2>
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="input-group">
        <el-form-item label="昵称" prop="name" style="font-weight:bold;">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" style="font-weight:bold;">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2" style="font-weight:bold;">
          <el-input v-model="form.password2"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile" style="font-weight:bold;">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="mail" style="font-weight:bold;">
          <el-input v-model="form.mail"></el-input>
        </el-form-item>
      </el-form>
      <button type="submit" @click="handleRegister">注册</button>
      <p class="login-link">
        已有账号？<router-link to="/login">立即登录</router-link>
      </p>
    </div>
  </div>
</template>

<script>
import Axios from '@/my_axios';

export default {
  data() {
    return {
      form: {
        name: '',
        password: '',
        password2:'',
        mobile: '',
        mail:'',
      },
      rules: {
        name: [
          {required:true, message: '昵称不可为空', trigger:'blur'},
        ],
        password: [
          {required:true, message:'请输入密码', trigger:'blur'}
        ],
        password2: [
          {required:true, message:'请确定密码', trigger:'blur'}
        ],
        mobile: [
          {required:true, message:'电话号码不可为空', trigger:'blur'},
          {min:11, max:11, message: '电话号码位数不对', trigger:'blur'},
        ],
      }
    };
  },
  methods: {
    handleRegister() {
        Axios.post('userApply', {
            form:this.form 
        }).then((resp)=> {
            console.log("后端返回的是:", resp)
            if(resp.data.errno==0) {
                window.alert(resp.data.errmsg);
                this.$router.push('/login');
            }else{
                alert(resp.data.errmsg)
            }
        })
    }
  }
};
</script>

<style scoped>
.login_whole {
    width: 100%;
    height: 100%;
    background-image: url('../../public/login_picture.jpeg'); /* 设置背景图片 */
    background-size: cover; /* 确保图片覆盖整个容器 */
    background-position: center; /* 居中对齐背景图片 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.register-box {
    background: white;
    padding: 20px; border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 600px;
    text-align: center;
    position: absolute;
}

h2 {
    margin-bottom: 20px;
    color: #333;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

::v-deep .el-input__inner {
  width:400px;
}

button {
    width: 70%;
    padding: 10px;
    margin-top: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.login-link {
    margin-top: 15px;
    color: #555;
}

.login-link a {
    color: #007bff;
    text-decoration: none;
}

.login-link a:hover {
    text-decoration: underline;
}
</style>